<template>
  <a-modal :title="title" :width="800" :maskClosable="false" :visible="visible" @cancel="visible = false">
    <a slot="footer">
      <a-button v-if="cancelText" @click="visible = false">{{ cancelText }}</a-button>
      <a-button v-if="okText == '确定'" type="primary" :loading="button_loading" @click="handleSubmit">{{ okText }}</a-button>
      <a-button v-if="okText == '关闭'" type="primary" @click="visible = false">{{ okText }}</a-button>
    </a>
    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <div ref="notclickn" :class="[actionType == 'view' ? 'viewless notclickn' : '']">
          <a-form :form="form" :labelAlign="'left'">
            <a-row :gutter="24">
              <a-col :md="12" :sm="24">
                <a-form-item v-bind="formItemLayout" label="年龄段">
                  <treeselect :show-count="true" :disable-branch-nodes="true" :options="ageGroupDrop" v-model="ageGroupValue" placeholder="请选择年龄段..." :normalizer="normalizer" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item v-bind="formItemLayout" label="问题分类">
                  <a-select allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-decorator="['categoryID', { rules: [{ required: true, message: '请填写分类!' }] }]">
                    <a-select-option v-for="(item, index) in questionDict" :key="item.ID" :value="item.ID">
                      {{ item.Title }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item v-bind="formItemLayout" label="分数">
                  <a-input-number :min="1" :max="100000" v-decorator="['score', { rules: [{ required: true, message: '请填写分数!' }] }]" :style="{ width: '100%' }" allowClear />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item v-bind="formItemLayout" label="星级">
                  <a-rate :allow-clear="false" v-decorator="['star', { rules: [{ required: true, message: '请填写星级!' }] }]" />
                  <!-- <a-input-number :min="1" :max="100000" v-decorator="['star', { rules: [{ required: true, message: '请填写星级!' }] }]" :style="{ width: '100%' }" allowClear /> -->
                </a-form-item>
              </a-col>

              <a-col :md="24" :sm="24">
                <a-form-item v-bind="formItemLayout1" label="题目内容">
                  <a-textarea :rows="4" v-decorator="['questionDescribe']" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { questionCategoryList } from '@/api/question'
import { uploadImage, getImg, studentInfo } from '@/api/students'
import { mapActions, mapGetters } from 'vuex'
import { dropList } from '@/api/drop'
import dropValue from '@/views/dropValue'
import moment from 'moment'
export default {
  components: { Treeselect },
  props: {
    actionType: {
      type: String,
      required: true
    },
    display: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      a: null,
      headers: {
        authorization: 'authorization-text'
      },
      currentId: null,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: '添加题库信息',
      visible: false,
      uploadParams: {
        tablename: 'Budget',
        signname: null
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      normalizer(node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens
        }
      },
      okText: '确定',
      cancelText: '取消',
      ageGroup: [],
      ageGroupDrop: [],
      ageGroupValue: null,
      questionDict: []
    }
  },
  watch: {},
  computed: { ...mapGetters(['token']) },
  methods: {
    getImg,
    moment,
    buttonText(actionType) {
      if (actionType == 'view') {
        this.okText = '关闭'
        this.cancelText = null
      } else {
        this.okText = '确定'
        this.cancelText = '取消'
      }
    },
    clearData() {
      Object.assign(this, {
        tip: '数据获取中...',
        ageGroupValue: null
      })
    },
    choosed(data) {
      this.choosedStudent = data
      if (data.length > 0) {
        studentInfo({ id: data[0].id }).then(res => {
          this.StudentInfo = res.data.StudentInfo
        })
      } else {
        this.StudentInfo = {
          photoUrl: null,
          name: null,
          sex: null,
          IDNumber: null
        }
      }
      this.choosedStudentWatch = data
    },
    closeShareholder(item) {
      this.choosedStudent = this.choosedStudent.filter(a => a.id != item.id)
      this.choosedStudentWatch = this.choosedStudentWatch.filter(a => a.id != item.id)
    },
    add() {
      Object.assign(this, {
        visible: true,
        title: '添加题库信息'
      })
      this.clearData()
      this.form.resetFields()
      setTimeout(() => {
        this.buttonText(this.actionType)
      }, 500)
    },
    edit(data) {
      Object.assign(this, {
        spinning: true,
        visible: true,
        title: '修改题库信息'
      })
      this.form.resetFields()
      this.initData(data)
      this.buttonText(this.actionType)
    },
    view(data) {
      Object.assign(this, {
        spinning: true,
        visible: true,
        title: '查看题库信息'
      })
      this.form.resetFields()
      this.initData(data)
      this.buttonText(this.actionType)
    },
    initData(data) {
      questionCategoryList({ pageSize: Math.max(), index: 1, categoryID: data.categoryID }).then(res => {
        // this.questionDict = res.data
        setTimeout(() => {
          this.currentId = data.ID
          const { setFieldsValue } = this.form
          setFieldsValue({
            categoryID: data.categoryID,
            score: data.score,
            star: data.star,
            questionDescribe: data.questionDescribe
          })
          this.ageGroupValue = data.ageGroupID
          this.spinning = false
        }, 1000)
      })
    },
    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.tranData(values)
        } else {
        }
      })
    },
    tranData(values) {
      var _this = this
      this.button_loading = true
      setTimeout(() => {
        const value = {
          ...values,
          ageGroupID: this.ageGroupValue,
          addUserID: this.actionType === 'edit' ? null : this.token.id,
          editUserID: this.actionType === 'add' ? null : this.token.id
        }
        this.button_loading = false
        this.$emit('save', value, this.currentId)
        this.visible = false
      }, 1000)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    },
    removeChildrenIfNUll(data) {
      data.map(a => {
        if (a && a.Childrens.length > 0) {
          this.removeChildrenIfNUll(a.Childrens)
        } else {
          deleteChildrenIfNull2(a)
        }
      })
    }
  },
  created() {
    dropList({ categoryId: dropValue.ageGroupDict }).then(res => {
      this.ageGroup = res
      this.ageGroupDrop = res
      this.removeChildrenIfNUll(this.ageGroupDrop)
    })
    dropList({ categoryId: dropValue.questionDict }).then(res => {
      this.questionDict = res
    })
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
/deep/.ant-card-head {
  color: #ffffff;
  background-color: @primary-color;
}
/deep/.ant-popover-inner-content {
  padding: 0;
}
.ant-form-item {
  margin-bottom: 4px;
}
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-list-picture-card-container {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.notclickn {
  pointer-events: none;
}

.viewless {
  /deep/.ant-input-number {
    border: none;
    background: transparent;
  }

  /deep/.ant-input {
    border: none;
    background: transparent;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /deep/.ant-input-disabled {
    color: rgba(0, 0, 0, 0.65);
    cursor: default;
  }

  /deep/.ant-select-disabled {
    color: rgba(0, 0, 0, 0.65);
  }

  // /deep/.ant-modal-content {
  //   pointer-events: unset;
  // }
  /deep/.ant-select-selection--single {
    border: none;
    background: transparent;
  }

  /deep/.ant-select-arrow .ant-select-arrow-icon {
    display: none;
  }

  /deep/.anticon {
    display: none;
  }
  /deep/.anticon-star {
    display: unset;
  }

  /deep/.vue-treeselect div,
  .vue-treeselect span {
    border: none;
  }

  /deep/.vue-treeselect__x-container {
    display: none;
  }

  /deep/.vue-treeselect__control-arrow-container {
    display: none;
  }
}
</style>
